<template>
	<view>
		<view class="search">
			<uv-search placeholder="输入项目名称" :showAction="false" @search="findCanBuyProject"></uv-search>
		</view>
		<view class="no-data" v-show="noDataFlag">
			<uv-empty text="找不到相关项目" mode="list"></uv-empty>
		</view>
		<view class="project" v-for="project in projects" @click="projectDetailPage(project.id)">
			<view class="project-pic">
				<image style="width: 100%; height: 200rpx; border-radius: 10rpx;" mode="aspectFill"
					:src="project.mainPic"></image>
			</view>
			<view class="project-name">[{{project.projectName}}]</view>
			<view class="project-schedule">
				<view class="project-schedule-l"><text class="project-schedule-label">项目进度</text> <text
						class="project-schedule-value">{{project.projectSchedule}}%</text></view>
				<view class="project-schedule-r">
					<uv-line-progress :percentage="project.projectSchedule" :showText="false" activeColor="royalblue"
						height="12rpx"></uv-line-progress>
				</view>
			</view>
			<view class="project-scale">
				<view class="project-scale-l"><text class="project-scale-label">项目规模</text> <text
						class="project-scale-value">{{project.projectAmount}}万USDT</text></view>
				<view class="project-scale-r">{{project.rebateModeName}}</view>
			</view>
			<view class="invest-info">
				<view class="invest-info-item">
					<view class="invest-info-item-label">投资期限</view>
					<view class="invest-info-item-label2">（{{project.timeUnit}}）</view>
					<view class="invest-info-item-value">{{project.term}}</view>
				</view>
				<view class="invest-info-item">
					<view class="invest-info-item-label">收益率</view>
					<view class="invest-info-item-label2">（%）</view>
					<view class="invest-info-item-value">{{project.rate}}%</view>
				</view>
				<view class="invest-info-item">
					<view class="invest-info-item-label">每期收益</view>
					<view class="invest-info-item-label2">（USDT）</view>
					<view class="invest-info-item-value">{{project.singleTimeMinIncome}}</view>
				</view>
				<view class="invest-info-item">
					<view class="invest-info-item-label">起购金额</view>
					<view class="invest-info-item-label2">（USDT）</view>
					<view class="invest-info-item-value">{{project.minSubscribeAmount}}</view>
				</view>
			</view>
			<uv-gap height="1" bgColor="#888"></uv-gap>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				projects: [],
				noDataFlag: false,
			}
		},
		onLoad() {},
		methods: {

			projectDetailPage(id) {
				uni.navigateTo({
					url: '../projectDetail/projectDetail?id=' + id
				});
			},

			findCanBuyProject(keyword) {
				if (keyword == '') {
					return;
				}
				var that = this;
				uni.$uv.http.get('/financialProject/findCanBuyProject', {
					params: {
						projectName: keyword
					}
				}).then(res => {
					that.projects = res.data;
					that.noDataFlag = that.projects.length == 0;
				});
			},
		}
	}
</script>

<style>
	.no-data {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 400rpx;
	}

	.search {
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;
	}

	.invest-info {
		display: flex;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
	}

	.invest-info-item {
		flex: 1;
		text-align: center;
	}

	.invest-info-item-label {
		font-size: smaller;
		color: #888;
	}

	.invest-info-item-label2 {
		font-size: smaller;
		color: #888;
	}

	.invest-info-item-value {
		font-size: smaller;
		padding-top: 24rpx;
		color: royalblue;
		font-weight: bold;
	}

	.project-scale-value {}

	.project-scale-label {
		padding-right: 16rpx;
	}

	.project-scale-l {
		flex: 1;
		padding-right: 64rpx;
		font-size: smaller;
	}

	.project-scale-r {
		flex: 1.6;
		font-size: smaller;
		color: royalblue;
	}

	.project-scale {
		display: flex;
		align-items: center;
		padding-top: 12rpx;
	}

	.project-schedule-value {
		color: royalblue;
	}

	.project-schedule-label {
		padding-right: 16rpx;
	}

	.project-schedule-l {
		flex: 1;
		padding-right: 64rpx;
		font-size: smaller;
	}

	.project-schedule-r {
		flex: 1.6;
	}

	.project-schedule {
		display: flex;
		align-items: center;
		padding-top: 12rpx;
	}

	.project-name {
		color: #333;
		font-size: 28rpx;
		font-weight: bold;
		padding-top: 12rpx;
	}

	.project-pic {}

	.project {
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;
	}
</style>